<template>
  <view class="page">
    <view class="ff__box">
      <view class="ff__row">
        <view class="ff__label star">车牌号码</view>
        <input v-model="form.number" class="ff__input" placeholder="请输入车牌号码" />
        <view @click="randomNumber" class="random">随机生成</view>
      </view>
      <view class="ff__row">
        <view class="ff__label">车辆颜色</view>
        <input v-model="form.color" class="ff__input" placeholder="请输入车辆颜色" />
      </view>
      <view class="ff__row ff__row-upload">
        <view class="ff__label">车辆照片</view>
        <!-- TODO: 多选逻辑 -->
        <uni-file-picker v-model="files" mode="grid" @select="uploadFile" @delete="delFile" />
      </view>
    </view>
    <view @click="submit" class="global-btn">提交</view>
    <popup ref="popup"/>
  </view>
</template>

<script>
import { fileUploadAPI, fileDeleteAPI } from '@/api/file';
import { YD_formatUrl } from '@/utils/tools.js';
import { bindCarAPI } from '@/api/car.js';

export default {
  data() {
    return {
      from: '', // 标记从那个页面跳转而来
      form: {
        number: '',
        color: '',
        images: []
      },
      files: []
    }
  },
  onLoad(options) {
    this.from = options.from;
    if (this.from === 'package') {
      this.$refs.popup.success('请先绑定车辆信息');
    }
    this.randomNumber()
  },
  methods: {
    /** @name 文件上传 **/
    uploadFile(e) {
      // TODO: 多选
      uni.showLoading({ title: '上传中...' })
      const file = e.tempFiles[0];
      fileUploadAPI({ tempFilePaths: e.tempFilePaths[0] }, 'car').then(res => {
        this.files.push({
          name: file.name,
          extname: file.extname,
          fileId: res.path,
          url: YD_formatUrl(res.path),
        })
        this.form.images.push(res.path)
      }).finally(() => {
        uni.hideLoading();
      })
    },
    /** @name 文件删除 **/
    delFile(e) {
      const info = e.tempFile;
      uni.showLoading({ title: '删除中...' })
      fileDeleteAPI({ path: info.fileId }).then(() => {
        this.form.images.splice(this.form.images.indexOf(info.fileId), 1);
      }).finally(() => {
        uni.hideLoading();
      })
    },
    /** @name 随机生成车牌号码 **/
    randomNumber () {
      function getPlate (total = 5) {
        const stateList = '京津冀晋辽吉沪苏浙皖闽琼赣鲁豫鄂湘粤渝川贵云陕甘蒙黑桂藏青宁新'
        const charList = 'ABCDEFGHJKLMNQPRSTUVWXYZ'
        const numList = '1234567890'
        const halfList = [charList, numList]
        const state = dicingChar(stateList)
        const city = dicingChar(charList)
        let sequence = ''
        while (total--) {
          sequence += dicingChar(halfList[Math.round(Math.random())])
        }
        return `${state}${city}${sequence}`
      }
      function dicingChar (series) {
        return series[~~(Math.random() * series.length)]
      }
      this.form.number = getPlate()
    },
    submit() {
      this.YD_checkEmpty(this.form.number, '请输入车牌号码', this);
      uni.showLoading({ title: '绑定中...' })
      bindCarAPI({
        ...this.form,
        images: this.form.images.join(','),
      }).then(() => {
        this.$refs.popup.success('绑定成功');
        uni.hideLoading();
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
            success: () => {
              uni.$emit('bind');
            }
          });
        }, 400)
      })
    }
  }
}
</script>

<style lang="scss">
.page {
  box-sizing: border-box;
  padding: 24rpx 24rpx 2rpx 24rpx;
}
.ff__box{
	background-color: #fff;
	border-radius: 16rpx;
	box-sizing: border-box;
	padding: 0 24rpx 0 24rpx;
}
.ff__row{
	width: 100%;
	min-height: 88rpx;
	font-size: 30rpx;
	display: flex;
	align-items: center;
	border-bottom: 2rpx solid #EEEEEE;
	color: #333;
  &:last-child {
    border-bottom: none;
  }
}
.ff__row-upload {
  align-items: flex-start;
  padding: 12px 0;
}
.ff__label{
  width: 160rpx;
	font-size: 26rpx;
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding-right: 20rpx;
	padding-left: 4rpx;
	white-space: nowrap;
  color: #999;
}
.ff__label.star::before{
	content: '*';
	min-width: 16rpx;
	color: #FF3030;
	font-size: 30rpx;
	text-align: left;
	line-height: 1;
	margin-top: 4rpx;
	margin-right: 8rpx;
}
.ff__value{
	flex: 1;
	box-sizing: border-box;
	padding-right: 16rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	font-size: 26rpx;
  color: #333;
}
.ff__input{
	flex: 1;
	height: 32rpx;
	font-size: 28rpx;
	color: #333;
	margin-right: 20rpx;
}
.ff__placeholder{
	color: #d1d1d1;
	font-size: 28rpx;
}
.ff__arrow{
  min-width: 44rpx;
	width: 44rpx;
	height: 88rpx;
}
.block {
  width: 100%;
  height: 88rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 8rpx;
  color: #999999;
  box-sizing: border-box;
  padding: 0 24rpx;
  margin-top: 24rpx;
}
.random {
  font-size: 28rpx;
  color: $primary;
}
</style>
